<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../image/images/logo.png">
    <link rel="stylesheet" href="../css/common.css">
    <link rel="stylesheet" href="../css/index.css">
    <link rel="stylesheet" href="../css/detail.css">
</head>

<body>
    <div class="top-nav">
        <ul class="row">
            <li>欢迎来到天天生鲜!</li>
            <li class="space"></li>
            <li>登录</li>
            <li>|</li>
            <li>注册</li>
            <li>|</li>
            <li>用户中心</li>
            <li>|</li>
            <li>我的购物车</li>
            <li>|</li>
            <li>我的订单</li>
        </ul>
    </div>
    <div class="main">
        <div class="top-search">
            <img src="../image/images/logo.png" alt="">
            <div class="serch-box">
                <input type="text" placeholder="请输入商品名称">
                <span>搜索</span>
            </div>
            <div class="cart-box">
                <div class="cart-text">我的购物车</div>
                <div class="cart-num">1</div>
            </div>
        </div>
    </div>
    <div class="cate-titbox">
        <ul class="cate">
            <h2>全部商品</h2>
            <li>手机</li>
            <li>|</li>
            <li>手机生鲜</li>
            <li>|</li>
            <li>抽奖</li>
        </ul>
    </div>
    <div class="nav">
        <span>全部分类</span> <i></i> <span>新鲜水果</span> <i></i> <span>商品详情</span>
    </div>
    <div class="detail">
        <div class="row">
            <img src="../image/images/goods_detail.jpg">
            <div class="gd">

                <div class="tit">大兴大棚草莓</div>

                <p>草莓浆果柔软多汁，甜甜的很美味 适合贮藏速冻，速冻冰凉爽口</p>
                <div class="price-box">
                    <span>￥<font size="16">16.80</font></span>
                    <span>单位：500g</span>
                </div>
                <div class="asn">
                    <label for="num">数量:</label>
                    <div class="in">
                        <input type="text" value="1">
                        <div class="as">
                            <span>+</span>
                            <span>-</span>
                        </div>
                    </div>
                </div>
                <div class="total">
                    总价：<span>16.80</span>
                </div>
                <div class="btns">
                    <button class="default">立即购买</button>
                    <button class="delete">加入购物车</button>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="left">
                <div class="tit">新品推荐</div>
                <div class="gad">
                    <img src="../image/images/goods/goods001.jpg">
                    <div class="gad-tit">商品柠檬</div>
                    <div class="des">￥3.90</div>
                </div>
                <div class="gad">
                    <img src="../image/images/goods/goods002.jpg">
                    <div class="gad-tit">商品葡萄</div>
                    <div class="des">￥16.60</div>
                </div>
            </div>
            <div class="right">
            <div class="tits">
                <div class="title active">商品介绍</div>
                <div class="title">评价</div>
            </div>
            <div class="cons">
                <div class="con">
                    商品详情
                </div>
                <div class="con">
                    评价内容
                </div>
            </div>
        </div>
    </div>
</div>
    <div class="botton">
        <ul class="row">
            <li>关于我们</li>
            <li>|</li>
            <li>联系我们</li>
            <li>|</li>
            <li>招聘人才</li>
        </ul>
        <p>
            copyRight&copy;2023 22及移动应用开发
        </p>
        <p>
            电话:15638389896&nbsp;&nbsp;QQ:6666667777@qq.com
        </p>
    </div>
</body>
 <script src="./jquery-3.6.3.js"></script>
 <script>
    $(document).ready(function(){
        $(".right .tits .title").click(function(){
            $(".right .tits .title").removeClass("active");
            $(this).addClass("active")
            let idx = $(this).index()
            $(".cons .con").hide();
            $($(".cons .con")[idx]).show();
        })                       
    })
 </script>
</html>